import React from 'react';
import ReactDom from 'react-dom';
import { useHistory } from 'react-router-dom';
import ZIndex from '@/components/ZIndex';
import { empty } from '@/common/utils';
import DownloadImage from '@/assets/images/DialogDownload/download_image.png';
// import DownloadButton from '@/assets/images/DialogDownload/download_button.png';
import CloseIcon from '@/assets/images/DialogDownload/close_icon.png';

import styles from './style.scss';

const DialogDownload = ({ visible, onClose }) => {
  const history = useHistory();

  const onPathJumpHandle = () => history.push('/download');

  if (!visible) return null;
  return ReactDom.createPortal((
    <ZIndex className={styles.container}>
      <div className={styles.content}>
        <img className={styles.image} src={DownloadImage} />
        <button type="button" className={styles.button} onClick={onPathJumpHandle}>立即下载</button>
      </div>
      <img className={styles.close} onClick={onClose} src={CloseIcon} />
    </ZIndex>
  ), document.body);
};

DialogDownload.defaultProps = {
  onClose: empty,
};

export default DialogDownload;
